<template>
  <div>
    <div class="provider-list">
      <div class="header">
        <div class="header-line2 flex-s">
          <el-input
            placeholder="请输入专家名称"
            v-model="params.zhuanjiamingcheng"
            style="width: 350px"
            size="large"
          >
            <template #append>
              <el-button
                @click="GetList"
                style="min-width: 50px"
                icon="Search"
              />
            </template>
          </el-input>
          <el-select
            width="150"
            show-border
            class="ml20"
            v-model="params.yewuleixing"
            size="large"
            placeholder="类型"
            clearable
            @change="GetList"
          >
            <el-option
              v-for="item in options"
              :key="item.dicValue"
              :label="item.dicLabel"
              :value="item.dicValue"
            >
              {{ item.dicLabel }}
            </el-option>
          </el-select>
        </div>
      </div>
      <div class="content providerTable">
        <el-table
          ref="multipleTableRef"
          border
          :load="loading"
          :data="list"
          style="width: calc(100% - 20px)"
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection" width="55" />
          <el-table-column property="zjNo" label="编号" align="center" />
          <el-table-column
            property="zhuanjiamingcheng"
            label="专家名称"
            align="center"
          />
          <el-table-column property="biaoqian" label="标签" align="center" />
          <el-table-column
            property="yewuleixing1"
            label="一级业务类型"
            align="center"
          />
          <el-table-column
            property="yewuleixing2"
            label="二级业务类型"
            align="center"
          />
          <el-table-column
            property="yewuleixing3"
            label="三级业务类型"
            align="center"
          />
          <el-table-column property="zhicheng" label="职称" align="center" />
          <el-table-column fixed="right" label="操作" width="80" align="center">
            <template #default="scope">
              <el-button
                v-if="check === '1'"
                style="min-width: auto"
                link
                type="primary"
                size="small"
                @click.prevent="onOperation(scope.row, 'detail')"
                >详情</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <h-page
          v-if="total"
          v-model:curr-page="params.current"
          :size="params.size"
          :total="total"
          @change="GetList"
        />
        <el-form-item class="note-button-group flex-s mt50">
          <el-button size="large" @click="$router.go(-1)">取消</el-button>
          <el-button class="ml50" size="large" type="primary" @click="add">
            提交
          </el-button>
        </el-form-item>
      </div>
      <el-dialog
        class="list-dialog"
        show-close="false"
        width="40%"
        v-model="show"
        center
        style="padding: 0 30px"
      >
        <el-form :model="form">
          <el-form-item label="提交至：">
            <el-select
              width="150"
              show-border
              class="ml20"
              v-model="form.renyuanleixing"
              size="large"
              placeholder="类型"
            >
              <el-option
                v-for="item in options"
                :key="item.dicValue"
                :label="item.dicLabel"
                :value="item.dicValue"
              >
                {{ item.dicLabel }}
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <el-form-item class="note-button-group flex-s">
          <el-button size="large" @click="show = false">取消</el-button>
          <el-button
            class="ml50"
            size="large"
            type="primary"
            @click="submitForm"
          >
            提交
          </el-button>
        </el-form-item>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { defineComponent, toRefs, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { GetDictionary } from "@/api/system";
import { baseMsg } from "@/utils/utils";
import { AddProviderPeople, GetProviderPeopleList } from "@/api/provider";
export default defineComponent({
  setup() {
    const route = useRoute();
    const router = useRouter();
    const state = reactive({
      params: {
        current: Number(route.query.page) || 1,
        size: Number(route.query.size) || 10,
        zhuanjiamingcheng: "",
        yewuleixing: "",
        qiye: "",
      },
      list: [],
      check: localStorage.getItem("check"),
      options: [],
      total: 0,
      show: false,
      form: {
        gysNo: "",
        renyuan: [],
        renyuanleixing: "",
      },
    });
    // 查询负责人列表
    const GetList = async () => {
      state.params.qiye = route.query.qiye;
      state.form.gysNo = route.query.qiye;
      GetProviderPeopleList(state.params).then((res) => {
        if (res.code == 4201) {
          state.list = res.data.records;
          state.total = res.data.total;
        }
      });
    };
    // 查询负责人分类
    const GetSelect = async () => {
      const res = await GetDictionary({ dicId: "gongyingshangfuzerenleixing" });
      if (res.code == 4201) {
        state.options = res.data;
      }
    };
    const handleSelectionChange = (val) => {
      state.form.renyuan = val.map((item) => {
        return item.zjNo;
      });
    };
    const submitForm = () => {
      if (!state.form.renyuanleixing) {
        baseMsg("请选择提交类型", false);
      } else {
        AddProviderPeople(state.form).then((res) => {
          if (res.code == 4202) {
            GetList();
            baseMsg("添加成功");
            state.show = false;
          }
        });
      }
    };
    // 添加负责人提交
    const add = () => {
      if (state.form.renyuan.length == 0) {
        baseMsg("请选择负责人", false);
      } else {
        state.show = true;
      }
    };
    GetList();
    GetSelect();
    // 操作
    const onOperation = (params, operation) => {
      if (operation === "detail") {
        router.push({
          path: `/zhuanjia/detail`,
          query: {
            id: params.id,
          },
        });
      }
    };
    watch(
      () => route.query,
      () => {
        state.params.current = Number(route.query.page) || 1;
        GetList();
      },
      { deep: true }
    );
    return {
      ...toRefs(state),
      GetList,
      GetSelect,
      onOperation,
      handleSelectionChange,
      add,
      submitForm,
    };
  },
});
</script>
<style lang="scss" scoped>
.providerTable {
  padding-bottom: 30px;
}
.header {
  border-bottom: 10px solid #f2f2f2;
  border-radius: 10px 10px 0 0;
}
.header-line1 {
  padding: 20px 10px;
  border-bottom: 1px solid #ccc;
  border-radius: 10px 10px 0 0;
}
.header-line2 {
  padding: 20px 10px;
}
.content {
  border: none !important;
  margin: 20px 10px;
  background-color: transparent !important;
}
</style>
<style lang="scss">
.providerTable .el-table__header th {
  background-color: #f2f9fc !important;
}
.note-button-group {
  margin-top: 40px;
  .el-form-item__content {
    justify-content: center;
  }
}
</style>
